<template>
  <div class="content-show">
    <div style="padding: 10px; background-color: #f4f4f5; border-radius: 6px">
      <el-icon :size="'60px'" :color="'#73767a'"><DocumentAdd /></el-icon>
    </div>

    <el-badge class="item" v-for="(url, index) in showUrls" :key="url">
      <el-image :src="url" fit="fill" class="show-image"> </el-image>
      <el-icon class="delete-icon" name="delete" @click="removeImage(index, $event)"><Delete /></el-icon>
    </el-badge>
  </div>
</template>
<script lang="ts" setup name="ImageInput">
import { ref, watch } from "vue";
const props = defineProps({
  urls: {
    type: Array,
    default: () => {
      return [];
    }
  }
});

const showUrls = ref(props.urls);
watch(
  () => props.urls,
  newValue => {
    showUrls.value = newValue ? newValue : [];
  }
);

const emit = defineEmits(["remove"]);
const removeImage = (index, event) => {
  event.stopPropagation(); // 阻止事件向父元素传播
  event.preventDefault(); // 阻止浏览器默认行为
  showUrls.value.splice(index, 1);
  emit("remove", showUrls.value);
};
</script>
<style scoped lang="scss">
.content-show {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  .descriptions-box {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    height: 100%;
  }
}
.show-image {
  position: relative;
  width: 80px;
  height: 80px;
  padding: 5px;
}
.delete-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 8px;
  font-size: 15px;
  cursor: pointer;
  background-color: #fab6b6;
  border-radius: 50%;
}
</style>
